<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表区域</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row style="margin:5px 0;">
      <el-col :span="8">
        <el-input placeholder="请输入内容">
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </el-col>
      <el-col :span="4">
        <el-button type="primary" @click="goAddpage">添加商品</el-button>
        <!-- <span>{{'2020-3-13 22:3:11' | dateFormat}}</span> -->
      </el-col>
    </el-row>
    <!-- 商品列表区域 -->
    <!-- @selection-change="handleSelectionChange" -->
    <el-table :data="tableData" border style="width: 100%" @current-change="handleSelectionChange" @row-click="checkboxs">
      <el-table-column width='60'>
        <!-- :checked="false" -->
        <template slot-scope="scope">
          <el-checkbox @change="chck" v-model="scope.row.tit"></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column prop="id" label="ID" width="60"></el-table-column>
      <el-table-column prop="goodsname" label="商品名称" width="280"></el-table-column>
      <el-table-column prop="price" label="价格" width="180"></el-table-column>
      <el-table-column prop="banelurl" label="图片">
        <template slot-scope="scope">
          <img :src="scope.row.banelurl.split(',')[0]" alt width="50px" height="50px" />
        </template>
      </el-table-column>
      <!-- <el-table-column label="操作">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="编辑" placement="top-start">
            <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              size="mini"
              @click="update(scope.row.id)"
            ></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="添加" placement="top-start">
            <el-button
              type="success"
              icon="el-icon-check"
              circle
              size="mini"
              @click="$router.push({'name':'gettype'})"
            ></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="删除" placement="top-start">
            <el-button type="danger" icon="el-icon-delete" circle size="mini" @click="$message.warning('抱歉您没有权限')"></el-button>
          </el-tooltip>
        </template>
      </el-table-column> -->
    </el-table>
    <el-button type="primary" @click="$router.go(-1)">确定</el-button>
    <!-- <el-button type="primary" @click="add">确定1</el-button> -->
    <!-- 分页插件 -->
    <page @down="change" @up="changes" :list="tableData1"></page>
    <!-- 修改对话框 -->
    <el-dialog title="修改" :visible.sync="updateVisible" width="50%">
      <el-form :model="eidform" label-width="70px" class="el" ref="eidfromRef">
        <el-form-item label="商品标题" prop="name">
          <el-input v-model="eidform.goodsname" style="width:350px;"></el-input>
        </el-form-item>
        <el-form-item label="商品价格" prop="name">
          <el-input v-model="eidform.price" style="width:350px;"></el-input>
        </el-form-item>
        <!-- 商品图片 -->
        <el-form-item label="商品轮播图" label-width="90px">
          <el-upload action="/img/" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :on-success="handles1" :file-list="fileList" :limit="5">
            <i class="el-icon-delete" v-show="eidform.url" @click.stop="handleRemove3"></i>
            <!-- <img v-if="eidform.url" :src="eidform.url" class="avatar" /> -->
            <!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
          </el-upload>
          <!-- <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt />
          </el-dialog> -->
        </el-form-item>
        <el-form-item label="商品详情图" label-width="90px">
          <el-upload action="/img/" list-type="picture-card" :on-preview="handlePictureCardPreview1" :on-remove="handleRemove1" :on-success="handles2" :file-list="fileList1" :limit="5">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible1">
            <img width="100%" :src="dialogImageUrl1" alt />
          </el-dialog>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="updateVisible = false">取 消</el-button>
        <el-button type="primary" @click="getupdate">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import page from '@/components/pagesize.vue'
export default {
  data() {
    return {
      fileList: [],
      fileList1: [],
      tableData1: [],
      tableData: [],
      // 控制修改的显示与隐藏
      updateVisible: false,
      eidform: {},
      dialogVisible: false,
      dialogImageUrl: '',
      dialogVisible1: false,
      dialogImageUrl1: '',
      userId: '',
      chlist: '',
      v: {}
    }
  },
  created() {
    this.getlist()
  },
  methods: {
    getlist() {
      // console.log(this.$axios.defaults.baseURL)
      // axios.defaults.baseURL = '/'
      this.$http
        .post('/goods/list', { type: 0 })
        .then(res => {
          let ch
          res.data.message.forEach(index => {
            return (index.tit = false)
          })
          this.tableData1 = res.data.message
          this.tableData = res.data.message.slice(0, 10)
          //  console.log(this.tableData)
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 修改事件
    // update(id) {
    //   this.userId = id
    //   this.updateVisible = true
    //   this.$http.post('/goods/detail', { id: id }).then(res => {
    //     if (res.data.err_code != 200) {
    //       return this.$message.error('获取数据失败')
    //     }
    //     if(res.data.message[0].banelurl){
    //       res.data.message[0].banelurl.split(',').forEach(item=>{
    //         this.fileList.push({url:item})
    //       })
    //     }
    //     if(res.data.message[0].url){
    //       res.data.message[0].url.split(',').forEach(item=>{
    //         this.fileList1.push({url:item})
    //       })
    //     }
    //     this.eidform = res.data.message[0]
    //     console.log(this.eidform)
    //   })
    // },
    // 提交修改事件
    getupdate() {
      // this.eidform.id=  this.eidform.id+''
      this.$http.post('/goods/update/list', this.eidform).then(res => {
        // console.log(res)
        if (res.data.err_code === 1) {
          this.$message.error('修改失败')
        } else {
          this.$message.success('修改成功')
        }
      })
      this.$refs.eidfromRef.resetFields()
      this.handleRemove()
      this.handleRemove1()
      this.updateVisible = false
    },
    // 轮播图片上传事假
    handlePictureCardPreview(file) {
      // console.log(file)
      this.dialogVisible = true
      this.dialogImageUrl = file.url
    },
    // 轮播图片移除事件
    handleRemove() { },
    // 轮播图片上传
    handles1(file) {
      this.eidform.url = file.data + ','
    },
    // 详情图片上传事假
    handlePictureCardPreview1(file) {
      // console.log(file)
      this.dialogVisible1 = true
      this.dialogImageUrl1 = file.url
    },
    // 详情图片移除事件
    handleRemove1() {
      this.dialogImageUrl1 = ''
      // console.log('23')
    },
    // 详情图片上传
    handles2(file) {
      this.eidform.banelurl = file.data + ','
    },
    // 修改图片的事件
    handleRemove3(file, fileList) {
      //  this.file='',
      // this.dialogImageUrl1=''
    },
    // 下一页点击事件
    change(num1) {
      this.tableData = num1
      // this.tableData= this.tableData1.slice(num1,si)

      // console.log(this.tableData, num1, '父组件下一页')
    },
    // 上一页
    changes(num1) {
      // console.log(num1,si)
      this.tableData = num1
      // this.tableData=this.tableData1.slice(num1,si)
    },
    // 跳转商品添加页面
    goAddpage() {
      this.$router.push('/getadd')
    },
    // 选中事件
    handleSelectionChange(val) {
      this.tableData.forEach(item => {
        if (item.id !== val.id) {
          //  console.log(item.id, val.id)
          item.tit = false
        }
      })
      this.v = val
      this.$store.dispatch('getlist', val)
    },
    checkboxs(val) {
    },
    chck(val) {
      //  this.chlist=val
      // console.log(val, this.chlist)
    },
    add() {
      // this.$emit('addv',this.v)
    }
  },
  components: {
    page
  },
  watch: {
    tableData(val) {
      this.tableData = val
      // console.log(val,'监听的值')
    }
  }
}
</script>
<style lang="less" scoped>
.el {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.el-form-item {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
</style>
